import './index.css';
import {careArr} from './router';
import Head from '../../components/header';
import { Layout, Menu } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import { Switch, Route, BrowserRouter, NavLink, useHistory, Redirect } from 'react-router-dom';
import { useState } from 'react'
import careStore from '../../store/carefulSrc';
import { observer } from 'mobx-react';

const { SubMenu } = Menu;
const { Sider } = Layout;

function CarefulManManege() {
    // console.log('0192080', props);
    /*
        设置高亮不消失大致思路
           (和 Vue 的 Router 相似)
            1、用 useHistory 打印出路径
            2、用 useState 设置路径初始位置
            3、在点击导航的时候，用 fnSrc 函数设置当前的路径
            4、设置每个 Menu 的 key 值为当前的路径
            5、在 Menu 中设置 SelectedKeys 属性为当前选中的行
    */
    // const hisSrc = useHistory();

    console.log(careStore);

    const [currentSrc, setCurrentSrc] = useState(careStore.pathname2);
    if(careStore.pathname2 !== currentSrc){
        setCurrentSrc(careStore.pathname2)
    }


    function fnSrc(ev){
        setCurrentSrc(ev.key);
    }

    return <BrowserRouter>
        <Layout>
            <Head></Head>
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={broken => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                    className="siderCss"
                >
                    <Menu
                        defaultSelectedKeys='/home/carefulManManege/list'
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                        onClick={fnSrc}
                        selectedKeys={currentSrc}
                    >
                        <SubMenu key="sub1" icon={<MailOutlined />} title="陪护员管理" >
                            {
                                careArr.map((item, index) => {
                                    if(item.children.length){
                                        return item.children.map((item2, index2) => {
                                            return <Menu.Item key={item2.path}>
                                                <NavLink to={item2.path}>{item2.name}</NavLink>
                                            </Menu.Item> 
                                        })
                                    }else{
                                        return <Menu.Item key={index} key={item.path}>{item.name}</Menu.Item>
                                    }
                                })
                            }
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout style={{ padding: '10px 50px 24px', background:'#eee'}}>
                    <Switch>
                        {
                            careArr.map((item, index) => {
                                if(item.children.length){
                                    return item.children.map((item2, index2) => {
                                        return <Route key={index2} path={item2.path} component={item2.component}/>
                                    })
                                }else{
                                        return <Route key={index} path={item.path} component={item.component}/>
                                }
                            })
                        }
                        <Redirect to="/home/carefulManManege/list"></Redirect>
                    </Switch>
                </Layout>
            </Layout>
        </Layout>
    </BrowserRouter>
}
export default observer(CarefulManManege);